class LineChart {
    constructor(canvas, banner) {
        if (banner != undefined) {
            this.banner = banner;
        }
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d');
        this.data = [];
        this.cpData = [];
        this.step = 1;
    }

    draw() {
        const maxPoints = this.canvas.width;
        let data = this.data;

        data = this.compressData(data, maxPoints);
        this.cpData = data;

        let spacing = this.canvas.width / (data.length / 2);

        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

        this.ctx.beginPath();
        this.ctx.moveTo(0, this.canvas.height - data[0]);

        for (let i = 1; i < data.length / 2; i++) {
            this.ctx.lineTo(i * spacing, this.canvas.height - data[i * 2]);
            this.ctx.lineTo(i * spacing, this.canvas.height - data[i * 2 + 1]);
        }

        this.ctx.lineWidth = 1;
        this.ctx.strokeStyle = '#007bff'; // 线条颜色
        this.ctx.stroke();
    }

    draw2() {
        const maxPoints = this.canvas.width;
        let length = this.data.length > maxPoints ? maxPoints : this.data.length;
        let spacing = this.canvas.width / length;
        if (this.data.length % maxPoints == 0) {
            stopTimer()
        }
        if (this.data.length >= maxPoints * 3) {
            this.step = 3;
            this.data = this.compressData(this.data, maxPoints)
        } else if (this.data.length >= maxPoints * 2) {
            if (this.step == 1)
                this.step = 2;
        }
        this.banner.innerHTML = `STEP:${this.step} dataLength:${this.data.length}`;
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

        this.ctx.beginPath();
        this.ctx.moveTo(0, this.canvas.height - this.data[0]);
        for (let i = 1; i < length; i++) {
            if (this.step == 1) {
                this.ctx.lineTo(i * spacing, this.canvas.height - this.data[i]);
            } else {
                this.ctx.lineTo(i * spacing, this.canvas.height - this.data[i * 2]);
                this.ctx.lineTo(i * spacing, this.canvas.height - this.data[i * 2 + 1]);
            }
        }
        this.ctx.lineWidth = 1;
        this.ctx.strokeStyle = '#007bff'; // 线条颜色
        this.ctx.stroke();


    }
    findDataAndPosition(arr) {
        let maxValue = 0, minValue = 0, maxPos = -1, minPos = -1;
        if (arr.length === 0) {
            console.log(arr)
            return { maxValue, maxPos, minValue, minPos };
        } else if (arr.length === 1) {
            return { maxValue: arr[0], maxPos: 0, minValue: arr[0], minPos: 0 };
        }

        maxValue = arr[0];
        minValue = arr[0];
        maxPos = 0;
        minPos = 0;

        for (let i = 0; i < arr.length; i++) {
            //找到最大值和最小值及其位置·
            if (arr[i] > maxValue) {
                maxValue = arr[i];
                maxPos = i;
            }
            if (arr[i] < minValue) {
                minValue = arr[i];
                minPos = i;
            }
        }
        return { maxValue, maxPos, minValue, minPos };
    }

    compressData(data, maxPoints) {
        let compressed = [];
        let segment, dataMaxMin;
        let step = Math.ceil(data.length / maxPoints);
        for (let i = 0; i < data.length; i += step) {
            segment = data.slice(i, i + step);
            dataMaxMin = this.findDataAndPosition(segment);
            if (dataMaxMin.maxPos === -1 || dataMaxMin.minPos === -1) {
                console.log(dataMaxMin);
                console.log('error');
                return [];
            }
            if (dataMaxMin.maxPos < dataMaxMin.minPos) {
                compressed.push(...[dataMaxMin.maxValue, dataMaxMin.minValue]);
            } else {
                compressed.push(...[dataMaxMin.minValue, dataMaxMin.maxValue]);
            }
        }
        if (this.banner) console.log(`step:${step} dataLength:${data.length} compressedLength:${compressed.length}`)
        return compressed;
    }

    addData(value) {
        this.data.push(value);
    }
}

function showChartData(len) {
    console.log(chart.data.slice(0, len), chart.cpData.slice(0, len/10), chart2.data.slice(0, len/10))
}
function startTimer() {
    if (window.timer1 != undefined)
        stopTimer();
    console.log('startTimer')
    window.timer1 = window.setInterval(() => {
        let value = Math.floor(Math.random() * 280);
        chart.addData(value);
        chart2.addData(value);
        chart.draw();
        chart2.draw2();
    }, 10);
}
function stopTimer() {
    console.log('stopTimer')
    window.clearInterval(window.timer1);
    window.timer1 = undefined;
    window.setTimeout(() => { showChartData(100) }, 100)
}
function init() {
    let canvas = document.getElementById('myCanvas');
    let canvas2 = document.getElementById('myCanvas2');
    let banner = document.getElementById('banner');
    window.chart = new LineChart(canvas, undefined);
    window.chart2 = new LineChart(canvas2, banner);
}

document.onload = init();
